import React, { useEffect, useState } from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, Upload, message } from 'antd';
import ImgCrop from 'antd-img-crop';
import Card from 'antd/es/card/Card';
import './index.scss'
import socket from '../../utils/io';

interface Iprops {
  toHome: () => void
}

const Login: React.FC<Iprops> = (props: Iprops) => {
  const { toHome } = props

  const [type, setType] = useState<boolean>(true)
  const [fileList, setFileList] = useState<any>([])

  useEffect(() => {
    socket.on('register back', (res: any) => {
      message[res.stutes ? "success" : "warning"](res.message)
      res.stutes && setType(res.stutes)
    })
    socket.on('login back', async (res: any) => {
      message[res.stutes ? "success" : "warning"](res.message)
      if (res.stutes) {
        await window.localStorage.setItem('user', res.username)
        toHome()
      }
    })
  }, [])


  const onFinish = (type: boolean) => (values: any) => {
    if (type) {
      socket.emit('login', socket.id, values)
    } else {
      socket.emit('register', socket.id, { ...values, id: values.username + new Date().getTime(), imgUrl: fileList?.[0]?.name })
    }
  };

  return (
    <Card className='LoginBox' title={type ? '登录' : '注册'}>
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={onFinish(type)}
      >
        <Form.Item
          name="username"
          rules={[{ required: true, message: '最少2位', min: 2 }]}
        >
          <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入你的英文名" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: '最少6位', min: 6 }]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="请输入你的密码"
          />
        </Form.Item>
        {
          !type ?
            <Form.Item>
              <ImgCrop>
                <Upload
                  action="/upload"
                  listType="picture-circle"
                  maxCount={1}
                  fileList={fileList}
                  onChange={(info: any) => {
                    setFileList(info.fileList)
                  }}
                >
                  上传头像
                </Upload>
              </ImgCrop>
              <a className="login-form-forgot"
                onClick={() => {
                  setType(true)
                }}>
                返回登录
              </a>
            </Form.Item>
            :
            <Form.Item>
              <a className="login-form-forgot"
                onClick={() => {
                  setType(false)
                }}>
                去注册
              </a>
            </Form.Item>
        }

        <Form.Item>
          <Button type="primary" htmlType="submit" className="login-form-button">
            {type ? '登录' : '注册'}
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default Login;